<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>成长体系配置</title>
		<link rel="stylesheet" href="../../lib/element-ui/theme-chalk/index.css">
		<link rel="stylesheet" href="../../lib/vxe-table/index.css">
		<link rel="stylesheet" href="../../lib/vxe-table-plugin-element/style.css">
		<link rel="stylesheet" href="../../lib/font-awesome/css/font-awesome.min.css">
		<script type="text/javascript" src="../../lib/vue/vue.js"></script>
		<script type="text/javascript" src="../../lib/xe-utils/xe-utils.js"></script>
		<script type="text/javascript" src="../../lib/element-ui/index.js"></script>
		<script type="text/javascript" src="../../lib/vxe-table/index.js"></script>
		<script type="text/javascript" src="../../lib/vxe-table-plugin-element/index.js"></script>
		<script type="text/javascript" src="../../lib/xlsx/xlsx.full.min.js"></script>
		<script type="text/javascript" src="../../lib/vxe-table-plugin-export-xlsx/index.min.js"></script>
		<script type="text/javascript" src="../../lib/xe-ajax/xe-ajax.js"></script>
		<script type="text/javascript" src="../../static/js/jquery.min.js"></script>
		<script type="text/javascript" src="../../static/js/webApi.js"></script>
		<style type="text/css">
			html,
			body,
			#app,
			.el-container {
				padding: 0px;
				margin: 0px;
				height: 100%;
			}

			.el-main {
				padding: 4px;
			}

			.class001>input {
				text-align: center;
			}

			.el-dialog__body {
				padding: 10px;
			}

			[v-cloak] {
				display: none;
			}
		</style>
	</head>

	<body>
		<el-container id="app">
			<el-main v-cloak>
				<el-form :inline="true" :model="queryData" label-width="100px" label-position="right" size="mini"
					style="height: 35px;">
					<el-form-item label="等级名称">
						<el-input v-model="queryData.gradeName" clearable placeholder="等级名称"></el-input>
					</el-form-item>
					<el-form-item label="累计时长">
						<el-input v-model="queryData.accumulatedDuration" clearable placeholder="累计时长"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button @click="reset()">重置</el-button>
						<el-button type="primary" @click="inquire()">查询</el-button>
					</el-form-item>
				</el-form>

				<vxe-grid border ref="xGrid" resizable show-overflow highlight-current-row="true" keep-source stripe
					:height="tableHeight" size="mini" :checkbox-config="tableRadio" :toolbar="tableToolbar"
					:loading="dataLoading" @cell-dblclick="cellDBLClickEvent"
					:edit-config="{trigger:'click', mode:'row'}" :header-cell-style="{'text-align':'center'}"
					@toolbar-button-click="toolbarButtonClickEvent" :data="tableData" :sort-config="{remot:true}">
					<vxe-table-column type="checkbox" width="60" align="center" fixed="left"></vxe-table-column>
					<vxe-table-column field="gradeName" title="等级名称" width="120" align="center" fixed="left">
					</vxe-table-column>
					<vxe-table-column field="accumulatedDuration" title="累计时长" width="120" align="center">
					</vxe-table-column>
					<vxe-table-column field="durationType" title="时长来源" width="170" align="center">
					</vxe-table-column>
					<vxe-table-column field="points" title="累计积分" width="120" align="center">
					</vxe-table-column>
					<vxe-table-column field="state" title="数据状态" width="90" align="center">
						<template #default="{ row }">
							{{row.state==0?'禁用':'启用'}}
						</template>
					</vxe-table-column>
					<vxe-table-column field="explanation" title="等级描述/备注" align="center">
					</vxe-table-column>
					<vxe-table-column field="updateUser" title="操作人" width="120" align="center">
					</vxe-table-column>
					<vxe-table-column field="updateTime" title="操作时间" width="180" align="center">
					</vxe-table-column>
				</vxe-grid>

				<vxe-modal ref="xModal" v-model="showModal" :title="selectRow ? '编辑&保存' :'新增&保存'" width="800" resize
					destroy-on-close @close="closeEvent('submitForm')">
					<el-form v-loading="submitLoading" :model="submitForm" :rules="formRules" ref="submitForm"
						label-width="120px" size="mini">
						<el-form-item label="等级名称" prop="gradeName">
							<el-input v-model="submitForm.gradeName"></el-input>
						</el-form-item>
						<el-form-item label="累计时长" prop="accumulatedDuration">
							<el-input v-model="submitForm.accumulatedDuration"></el-input>
						</el-form-item>
						<el-form-item label="时长来源" prop="durationType">
							<el-select v-model="submitForm.durationType" style="width:100%;" multiple
								placeholder="请选择时长来源(可多选)!">
								<el-option v-for="item in options" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="累计积分" prop="points">
							<el-input v-model="submitForm.points"></el-input>
						</el-form-item>
						<!-- <el-form-item label="数据状态" prop="state">
							<el-switch v-model=submitForm.state :active-value="1" :inactive-value="0"></el-switch>
							{{submitForm.state}}
						</el-form-item> -->
						<el-form-item label="等级描述/备注" prop="explanation">
							<el-input type="textarea" v-model="submitForm.explanation"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="submitEvent('submitForm')">保存</el-button>
							<el-button @click="resetForm('submitForm')">重置</el-button>
							<el-button @click="closeEvent('submitForm')">退出</el-button>
						</el-form-item>
					</el-form>

				</vxe-modal>
			</el-main>
		</el-container>
	</body>

	<script>
		window.onload = function() {
			var main = {
				data() {
					return {
						tableHeight: '100%',
						queryData: {
							gradeName: '',
							accumulatedDuration: ''
						},
						tableRadio: {
							trigger: 'row',
							highlight: true
						},
						tableToolbar: {
							id: 'toolbar',
							size: 'mini',
							perfect: true,
							buttons: [{
								code: 'add',
								name: '新增',
								icon: 'fa fa-plus vxe-primary-color'
							}, {
								code: 'update',
								name: '编辑',
								icon: 'fa fa-edit vxe-primary-color'
							}, {
								code: 'del',
								name: '删除',
								icon: 'fa fa-trash vxe-primary-color'
							}, ],
						},
						dataLoading: false,
						tableData: [],
						showModal: false,
						options: [],
						submitForm: {
							accumulatedDuration: "",
							cTime: "",
							cUser: "",
							explanation: "",
							durationType: [],
							gradeName: "",
							points: "",
							state: "",
							updateTime: "",
							updateUser: ""
						},
						formRules: {
							gradeName: [{
								required: true,
								message: '请输入等级名称'
							}],
							accumulatedDuration:[{
								required: true,
								message: '请输入累计时长'
							}],
							durationType:[{
								required: true,
								message: '请选择时长来源'
							}]
						},
						selectRow: 0,
						submitLoading: false,
						disabled: false,

					}
				},
				created() {
					this.getGrowthSystemList();
					this.getDictDetailTreeList();
				},
				mounted() {
					this.tableHeight = window.innerHeight - this.$refs.xGrid.$el.offsetTop - 75;
				},
				methods: {
					getDictDetailTreeList() {
						webApi("/dict/getDictDetailTreeList", "post", {"dictId":"20"}, res => {
							if (res.code == 200) {
								this.options = res.data;

							} else {

								this.$XModal.message({
									message: res.msg,
									status: 'error'
								})
							}
						}, error => {

							this.$XModal.message({
								message: res.msg,
								status: 'error'
							})
						});
					},
					reset() {
						this.queryData = {
							gradeName: '',
							accumulatedDuration: ''
						}
					},
					inquire() {
						this.getGrowthSystemList();
					},
					cellDBLClickEvent({
						row,
						rowIndex,
						$rowIndex,
						column,
						columnIndex,
						$columnIndex,
						$event
					}) {
						if (columnIndex > 1) {
							this.editEvent(row);
						}
					},
					toolbarButtonClickEvent({
						code
					}, event) {
						let self = this;
						switch (code) {
							case 'add':
								this.selectRow = 0;
								this.submitForm = {
										accumulatedDuration: "",
										cTime: "",
										cUser: "",
										explanation: "",
										durationType: [],
										gradeName: "",
										points: "",
										state: "",
										updateTime: "",
										updateUser: ""
									},
									this.showModal = true;
								break;
							case 'update':
								if (this.$refs.xGrid.getCheckboxRecords().length == 1) {
									// console.log("进入到这里面了")
									let row = this.$refs.xGrid.getCheckboxRecords()[0];
									// console.log(row,'row')
									this.submitForm.gradeName
									this.submitForm.gradeName = row.gradeName;
									this.submitForm.accumulatedDuration = row.accumulatedDuration;
									this.submitForm.points = row.points;
									if(row.durationType){
										this.submitForm.durationType = row.durationType.split(',');
									}
									else{
										this.submitForm.durationType=[];
									}
									this.submitForm.explanation = row.explanation;
									this.submitForm.state = row.state;
									this.submitForm['id'] = row.id
									this.selectRow = 1;
									this.showModal = true;
								} else if (this.$refs.xGrid.getCheckboxRecords().length > 1) {
									this.$message({
										message: "只能选择一条数据！",
										type: 'warning',
										center: true
									});
								} else {
									this.$message({
										message: "请至少选择一行数据",
										type: 'warning',
										center: true
									});
								}
								break;
							case 'del':
								let del_row = this.$refs.xGrid.getCheckboxRecords();
								if (del_row.length > 0) {
									let names = "";
									let ids = [];
									del_row.forEach(list => {
										names += list.gradeName + '、';
										ids.push(list.id)
									});
									names = names.substring(0, names.length - 1)
									this.$confirm('确认要删除' + names + '这' + del_row.length + '条等级的信息吗?', '提示', {
										confirmButtonText: '确定',
										cancelButtonText: '取消',
										type: 'warning'
									}).then(() => {
										webApi("/growthSystem/del?ids=" + ids, "get", {}, function(res) {
											if (res.code == 200) {
												self.$message({
													type: 'success',
													message: '删除成功!'
												});
												self.getGrowthSystemList();
											} else {
												self.$XModal.message({
													message: res.msg,
													status: 'error'
												})
											}
										}, function(error) {
											self.$XModal.message({
												message: res.msg,
												status: 'error'
											})
										});
									}).catch(() => {

									});
								} else {
									this.$message({
										message: "请选择需要删除的数据行",
										type: 'warning',
										center: true
									});
								}
								break;
						}
					},
					getGrowthSystemList() {
						let self = this;
						this.dataLoading = true;
						const params = {
							accumulatedDuration: this.queryData.accumulatedDuration,
							cTime: "",
							cUser: "",
							explanation: "",
							durationType: "",
							gradeName: this.queryData.gradeName,
							points: "",
							state: "",
							updateTime: "",
							updateUser: ""
						};
						webApi("/growthSystem/list", "post", params, function(res) {
							if (res.code == 200) {
								self.tableData = res.data;
								// console.log(self.tableData);
								self.dataLoading = false;
							} else {
								self.dataLoading = false;
								this.$XModal.message({
									message: res.msg,
									status: 'error'
								})
							}
						}, function(error) {
							self.dataLoading = false;
							this.$XModal.message({
								message: res.msg,
								status: 'error'
							})
						});
					},
					submitEvent(formName) {
						this.submitForm.durationType=this.submitForm.durationType.toString();
						console.log(this.submitForm)
						this.$refs[formName].validate((valid) => {
							if (valid) {
								this.submitLoading = true;
								this.disabled = true;
								let self = this;
								webApi('/growthSystem/save', 'post', this.submitForm, function(data) {
									self.submitLoading = false;
									self.disabled = false;
									if (data.code == 200) {
										self.$message({
											message: data.msg,
											type: 'success',
											center: true
										});
										self.getGrowthSystemList();
										self.showModal = false;
										self.$refs[formName].resetFields();
									} else {
										self.$message({
											message: data.msg,
											type: 'error',
											center: true
										});
									};
								}, function(xhr, type, errorThrown) {
									self.submitLoading = false;
									self.disabled = false;
								})

							} else {
								this.$XModal.message({
									message: "请填写带*的信息",
									status: 'error'
								});
								return false;
							}
						});
					},

					resetForm(formName) {
						this.$refs[formName].resetFields();
					},
					closeEvent(formName) {
						this.showModal = false;
						this.$refs[formName].resetFields();
					},
					durationType() {
						let self = this;
						webApi("")
					}
				}
			};
			var vue = Vue.extend(main);
			new vue().$mount('#app');
		}
	</script>

</html>